<!doctype html>
<html>
<head>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
	 <!--
    <link rel="stylesheet" href="/jquery/css/jquery.mobile-1.3.2.css">
	 <link rel="stylesheet" href="/jQueryDoc/jquery-mobile-1.3.2/demos/_assets/css/jqm-demos.css">
	 <link rel="stylesheet" href="/jQueryDoc/jquery-mobile-1.3.2/demos/css/themes/default/jquery.mobile-1.3.2.css">

	<link rel="stylesheet" href="/jQueryDoc/jquery-mobile-1.3.2/demos/css/themes/default/jquery.mobile-1.3.2.css">
	 -->
	
	<link rel="stylesheet" href="jqm/css/jquery.mobile-1.3.2.css">
	<link rel="stylesheet" href="css/hello.css">
	<!--
	<script src="/jquery/js/jquery-2.0.3.js"></script>
	-->
	<script src="jqm/js/jquery-2.0.3.js"></script>
	<script type="text/javascript">
			/* it is very important  that this customization scripot gets called after jQuery is loaded 
			 * but before the jQuery Mobile gets initialized!
			 */
			$(document).bind('mobileinit',function(){
				$.mobile.page.prototype.options.addBackBtn = true;
				$.mobile.page.prototype.options.backBtnText = "Back";
				$.mobile.page.prototype.options.backBtnTheme = "b";
				$.mobile.loader.prototype.options.text = "loading ...";
				$.mobile.loader.prototype.options.textVisible = true;
				$.mobile.loader.prototype.options.theme = "b";
				$.mobile.loader.prototype.options.html = "";
			});
	</script>
	<!--
	<script src="/jquery/js/jquery.mobile-1.3.2.js"></script>
	-->
	<script src="jqm/js/jquery.mobile-1.3.2.js"></script>
	<script src="src/itsm.js"></script>

	<script type="text/javascript">
		
		var itsm = new opentext.itsm( { 'host':'http://ubumame1204.opentext.net/otcs' });
		itsm.run();

	</script> 
</head>
<body>
    <div data-role="page" id="page1" data-theme="b" data-title="Home" data-add-back-btn="true" data-back-btn-text="Back">
 
        <div data-role="header" data-theme="b">
		  <!-- <<< -->
            <h1>OTCS Monitor</h1>
        </div><!-- /header -->
		  <!-- >>> -->
 
        <div data-role="content">
		  <!-- <<< -->
				<!--
				<span>
         		<a href="#page2_0" data-role="button" data-icon="star" data-transition="flip">WebViewer></a>
         		<a href="#page2_1" data-role="button" data-icon="star" data-transition="flip">Desktop></a>
         		<a id="otcs_cases_webviewer" href="#" data-role="button" data-icon="star" data-transition="flip">WebViewer></a>
         		<a id="otcs_cases_desktop" href="#" data-role="button" data-icon="star" data-transition="flip">Desktop></a>
				</span>

				<h3>Nested List Example</h3>
				<ul data-role="listview" id="restaurants_1" data-inset="true">

					<li>Restaurants
						<ul>
							<li>French
								<ul>
									<li>Le Central</li>
									<li>Bistro Vandome</li>
									<li>Antoine's</li>
								</ul>
							</li>
							<li>Cajun and Creole
								<ul>
									<li>Bayou Bob's</li>
									<li>Pappadeaux</li>
									<li>Lucile's</li>
								</ul>
							</li>
							<li>American
								<ul>
									<li>Dixon's</li>
									<li>Vesta Dipping Grill</li>
									<li>Steuben's</li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>


				<ul data-theme="c" data-role="listview" id="restaurants_2" data-inset="true">
					<li data-role="list-divider" data-divider-theme="b">OTCS Cases (28.8.2013)</li>
					<li><a href="#" id="otcs_cases_webviewer">WebViewer</a></li>
					<li><a href="#" id="otcs_cases_desktop">Desktop</a></li>
					<li><a href="#" id="otcs_cases_exchange">Exchange</a></li>
					<li><a href="#" id="otcs_cases_notes" >Notes</a></li>
					<li><a href="#" id="otcs_cases_fsa">FSA</a></li>
					<li data-role="list-divider" data-divider-theme="b">Cajun and Creole</li>
					<li>Bayou Bob's</li>
					<li>Pappadeaux</li>
					<li>Lucile's</li>
					<li data-role="list-divider" data-divider-theme="b">American</li>
					<li>Dixon's</li>
					<li>Vesta Dipping Grill</li>
					<li>Steuben's</li>
				</ul>

				<a href="#page4" data-role="button" data-theme="b" data-rel="dialog">Mortage</a>
				-->

	 			<span id="view-container-dashboard"/>


            <p>Select the car you like the best</p>
            <ul data-role="listview" data-inset="true" data-filter="true">
		  		<!-- <<< -->
               <li><a href="#">Acura</a></li>
               <li><a href="#">Audi</a></li>
               <li><a href="#">BMW</a></li>
               <li><a href="#">Cadillac</a></li>
               <li><a href="#">Ferrari</a></li>
               <li><a href="#">Skoda</a></li>
               <li><a href="#">Volkswagen</a></li>
               <li><a href="#">Mercedes</a></li>
               <li><a href="#">Ford</a></li>
               <li><a href="#">Maruti</a></li>
               <li><a href="#">Toyota</a></li>
               <li><a href="#">Suzuki</a></li>
               <li><a href="#">Mitsubishi</a></li>
               <li><a href="#">Subaru</a></li>
               <li><a href="#">Kia</a></li>
               <li><a href="#">Daewoo</a></li>
            </ul>
		  		<!-- >>> /listview -->
          <form>
         <label for="slider-0">Price in thousends of euro:</label>
            <input type="range" name="slider" id="slider-0" value="35" min="20" max="300" />
         </form>
			<div>
				<span>
         		<a href="#page3" data-role="button" data-icon="star" data-rel="dialog" data-transition="slidedown">Check the balance</a>
				</span>
				<span>
         		<a href="#" data-role="button" data-icon="star" data-theme="a">Order it!</a>
				</span>
			</div>

			<div data-role="collapsible-set" data-theme="b" data-content-theme="b" data-inset="false">
		  <!-- <<< -->
    			<div data-role="collapsible">
        			<h3>Animals</h3>
        			<ul data-role="listview" data-inset="false">
            		<li>Cats</li>
            		<li>Dogs</li>
            		<li>Lizards</li>
            		<li>Snakes</li>
        			</ul>
    			</div>
    			<div data-role="collapsible">
        			<h3>Cars</h3>
        			<ul data-role="listview" data-inset="false">
            		<li>Acura</li>
            		<li>Audi</li>
            		<li>BMW</li>
            		<li>Cadillac</li>
        			</ul>
    			</div>
    			<div data-role="collapsible">
        			<h3>Planets</h3>
        			<ul data-role="listview" data-inset="false">
            		<li>Earth</li>
            		<li>Jupiter</li>
            		<li>Mars</li>
            		<li>Mercury</li>
        			</ul>
    			</div>
			</div>
		  <!-- >>> /content -->

			<span>
         	<a href="#logout" data-role="button" data-icon="arrow-l" data-transition="flip">logout</a>
			</span>

        </div>
		  <!-- >>> /content -->
 
		<div data-role="footer">
    		<div data-role="navbar" data-iconpos="top" data-theme="b" data-position="fixed">
        		<ul>
            	<li><a href="#" data-icon="search">Search</a></li>
            	<li><a href="#" data-icon="home" class="ui-btn-active">Home</a></li>
            	<li><a href="#" data-icon="gear">Setup</a></li>
        		</ul>
    		</div><!-- /navbar -->
		</div><!-- /footer -->
 
    </div><!-- /page -->

	 <!--
	 <div data-role="page" id="page2" data-theme="b" >
	 -->
	 <div data-role="page" id="page2_0" data-theme="b" data-add-back-btn="true" data-back-btn-text="Back"> 
	 <div data-role="header" data-theme="b" data-position="fixed">
	 	<h1>Second Page</h1>
	 </div>
	 
	 <div data-role="content" data-theme="b">
	 	<span id="nested-view-container-0"/>
		<!-- here comes the dynamic content 
		<ul data-role="listview" id="webviewer">
		</ul>
		-->
	</div>

	<div data-role="footer" data-position="fixed" data-theme="b">
	<h1>&nbsp</h1>
	</div>

	</div>

	 <div data-role="page" id="page_mail" data-theme="b" data-add-back-btn="true" data-back-btn-text="Back"> 
	 	<div data-role="header" data-theme="b" data-position="fixed">
	 		<h1>Mail</h1>
	 	</div>
	 
		 <div data-role="content" data-theme="b">
	 		<span id="view-container-mail"/>
		</div>

		<div data-role="footer" data-position="fixed" data-theme="b">
			<h1>&nbsp</h1>
		</div>

	</div>


	 <div data-role="page" id="page_edit_case" data-theme="b" data-add-back-btn="true" data-back-btn-text="Back"> 
	 	<div data-role="header" data-theme="b" data-position="fixed">
	 		<h1>Edit Case Details</h1>
			<a href="#" class="ui-btn-right" name="submit_case_edit_form" id="submit_case_edit_form"  data-role="button" data-icon="check">Save</a>
	 	</div>
	 
		 <div data-role="content" data-theme="b">
			<form id="case_edit_form" action="">

				<div class="ui-grid-a">
					<div class="ui-block-a">
						<p>Case update:</p>
					</div>
					<div class="ui-block-b">
						<textarea cols="20" rows="6" name="case_edit_update" id="case_edit_update"></textarea>
					</div>

					<div class="ui-block-a">
						<p>Replace synopsis?</p>
					</div>
					<div class="ui-block-b">
						<select name="case_edit_include_synopsis" id="case_edit_include_synopsis" data-role="slider">
							<option value="off">Off</option>
							<option value="on">On</option>
						</select>
					</div>

					<div class="ui-block-a">
						<p>Synopsis:</p>
					</div>
					<div class="ui-block-b">
						<textarea cols="20" rows="6" name="case_edit_synopsis" id="case_edit_synopsis"></textarea>
					</div>
				</div>
				<span id="page_case_edit_status_message"/>

			</form>
		</div>

	</div>


	 <div data-role="page" id="page3">
	 <div data-role="header" data-theme="b">
	 <h1>Balance overview</h1>
	 </div>
	 
	 <div data-role="content">
	 	<p>The balance is unsufficient to buy this car.</p>
		<a href="#page4" data-role="button" data-theme="b" data-rel="dialog">Mortage</a>
	</div>

	</div>


<!-- Create an action sheet by simply removing the header! -->
	<div data-role="dialog" id="logout">
		<div data-role="content">
			<span class="title">Are you sure?</span>
			<p>
			<a href="#page2" data-role="button" data-theme="b" data-inline="true">Yes</a>
			<a href="#" data-role="button" data-theme="c" data-rel="back" data-inline="true">No!</a>
			</p>
		</div>
		<style>
			span.title { display:block; text-align:center; margin-top:10px; margin-bottom:20px; } 
		</style>
	</div>


	<div data-role="page" id="page4" data-theme="b" data-add-back-btn="true">
		<div data-role="header" data-position="inline" data-theme="b">
			<!--
			<a href="#" data-icon="delete">Cancel</a>
			-->
			<h1>Balance</h1>
			<a href="#" data-role="button" data-icon="check" data-inline="true">Done</a>
			<a href="#" data-role="button" data-icon="bars" data-inline="true">Action</a>
		</div>
		<div data-role="content">
			<h1>Balance screen</h1>
			<p>The account balance is unfortunately too low to finance this acquisition. You may be however interested into mortage program out bank offers to the premium clients</p>
		</div>
	</div>

</body>
</html>
